<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>评论管理</el-breadcrumb-item>
            <el-breadcrumb-item>评论列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="16">
              漫画名称:
              <div class="demo-input-suffix" style="margin-left: 65px;margin-top: -30px">
                <!--优化,点击enter也可以搜索  如果是表单要prevent一下 @submit.native.prevent 用clearable实现清空输入的内容-->
                <el-col :span="4">
                  <el-input placeholder="漫画名称" clearable v-model="comicName" @keyup.enter.native="getRemarkList" @clear="getRemarkList"></el-input>
                </el-col>
                <el-col :span="1.5" style="margin-top:10px ">用户名:</el-col>
                <el-col :span="4">
                  <el-input  placeholder="用户名" clearable v-model="username" @keyup.enter.native="getRemarkList" @clear="getRemarkList"></el-input>
                </el-col>
                <el-button type="primary" icon="el-icon-search" @click="getRemarkList" style="margin-left: 30px">搜索</el-button>
              </div>

            </el-row>
            <el-table :data="remarkList" border stripe>
                <el-table-column label="评论id" width="80px" prop="id"></el-table-column>
                <el-table-column hidden label="漫画Id" width="80px" prop="resourceId" ></el-table-column>
                <el-table-column hidden label="漫画名称" width="80px" prop="comicName" ></el-table-column>
                <el-table-column hidden label="评论人Id" width="80px" prop="userId"></el-table-column>
                <el-table-column label="评论者用户名" width="80px" prop="username"></el-table-column>
                <el-table-column label="评论时间" width="160px"  prop="remarkTime"></el-table-column>
                <el-table-column label="被评人Id" prop="beRemarkUserId"></el-table-column>
                <el-table-column label="上级评论Id">
                  <template slot-scope="sc">{{sc.row.parentId==0?'无':sc.row.parentId}}</template>
                </el-table-column>
                <el-table-column label="是否加精" width="150px" prop="status">
                  <template slot-scope="sc">
                    <el-switch
                        style="display: block"
                        v-model='sc.row.status==1?true:false'
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="加精"
                        inactive-text="普通"
                        @change='stillSave(sc.row.id,sc.row.status)'
                        >
                    </el-switch>
                  </template>
                </el-table-column>
                <el-table-column label="点赞数" prop="likeCount"></el-table-column>
                <el-table-column label="评论数" prop="remarkCount"></el-table-column>
              <el-table-column width="130px" label="评论详情">
                <template slot-scope="sc">
                  <el-popover
                      placement="bottom"
                      title="评论详情"
                      width="200"
                      trigger="click"
                      :content="sc.row.remarkText">
                    <el-button type="mini" slot="reference">评论详情</el-button>
                  </el-popover>
                </template>
              </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="danger" size="mini" @click="removeRemarkById(scope.row.id)" style="margin-top:3px;margin-left:2px ">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10 , 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
<!--          <div style="float:right;margin-right:300px;margin-top:-30px">
            <el-button type="primary"  size="mini" @click="go(1)" plain>首页</el-button>
            <el-button type="primary"  size="mini" @click="go(prePage)">上一页</el-button>&nbsp;&nbsp;
            <el-button type="primary"  size="mini" @click="go(nextPage)">下一页</el-button>&nbsp;&nbsp;
            <el-button type="primary"  size="mini"  @click="go(pages)" plain>尾页</el-button>
          </div>-->
        </el-card>
<!--        {{remarkList}}-->
    </div>
</template>
<script>
    export default {
        data() {
            return {
                pid:null,
                comicName:'',
                username:'',
                remarkList: [],
                pageNum: 1,
                pageSize: 5,
                prePage:0,
                nextPage:0,
                pages:0,
                total:0,
                // 以上是分页的
                val:[],
                checkIds:[],
                ifChecked:1,
                };
        },
        methods: {
          go(num){
            this.pageNum = num;
            this.reloadData();
          },
          removeRemarkById(id){
            console.log(id + "需要删除的评论id。。。");
            this.$confirm("此操作将永久删除该评论,是否继续?","提示",{
              confirmButtonText:'确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() =>{
              // 仔细检查，少了一个.baseUrl，那肯定报错404啊
              let url = this.$baseUrl.baseUrl + "remark/del/"+id;
              this.$axios.delete(url)
                  .then((res)=>{
                    if(res.data.code == 200){
                      this.$message({
                        message:res.data.msg,
                        type:'success',
                        duration:1000
                      })
                      this.reloadData();
                    }else {
                      this.$message({
                        message:res.data.msg,
                        type:'error',
                        duration:1000
                      })
                    }
                  })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          },
          stillSave(id,status){
            let url =  this.$baseUrl.baseUrl + "remark/setHot"
            this.$axios.get(url,{
              params:{
                id:id,
                status:status
              }
            }).then(res =>{
              if(res.data.code == 200){
                this.$message({
                  message:res.data.msg,
                  type:'success',
                  duration:1000
                })
                this.reloadData();
              }else{
                this.$message({
                  message:res.data.msg,
                  type:'error',
                  duration:1000
                })
              }
            })
          },

          reloadData(){
            let url = this.$baseUrl.baseUrl + "remark/list" ;
            this.$axios.get(url,{
              params:{
                pid:this.pid,
                comicName:this.comicName,
                username:this.username,
                now:this.pageNum,
                size:this.pageSize
              }
            }).then(res =>{
              if(res.data.code == 200){
                this.remarkList = res.data.data.list;
                this.pageNum = res.data.data.pageNum;
                this.pageSize = res.data.data.pageSize;
                this.total = res.data.data.total;

                this.prePage = res.data.data.prePage;
                this.nextPage = res.data.data.nextPage;
                this.pages = res.data.data.pages;
              }else{
                alert(res.data.msg);
              }
            })
          },
          handleSizeChange(size){
            this.pageSize = size;
            this.pageNum = 1;

            this.reloadData();
          },
          handleCurrentChange(now){
            this.pageNum = now;
            this.reloadData()
          },
          getRemarkList(){
            this.pageNum = 1;
            this.reloadData();
          },
        },
        created() {
            this.reloadData();
        }
    };
</script>
<style lang="less" scoped>
/deep/.el-table th > .cell {
  text-align: center;
}

/deep/.el-table .cell {
  text-align: center;
}
</style>